<template>
    <view class="page">
        <back :title="'信息中心'"></back>
        <scroll-view class="message_box" scroll-y v-if="infomList.length > 0">
            <view class="dade_box" v-for="(item, index) in infomList" :key="item.id">
                <view class="dange_msg_box" @click.stop="goDetail(item)">
                    <view :class="item.img_url != '' ? 'left_msg_box_1' : 'left_msg_box_2'">
                        <view class="left_msg_top_box" v-if="item.flag == 1" style="color:rgba(128, 128, 128, 0.9)">{{
            item.title }}</view>

                        <view class="left_msg_top_box" v-else>{{ item.title }}</view>
                        <view class="left_msg_bot_box">
                            <view class="tx_box">
                                <image :src="item.avatar" mode="scaleToFill" />
                            </view>
                            <view class="left_tx_rt_text_box">
                                <view class="nNmae_box">
                                    {{ item.nickname }}
                                </view>
                                <view class="nTime_box">{{ item.created_at }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="right_msg_box" v-if="item.img_url">
                        <image :src="item.img_url" mode="scaleToFill" />
                    </view>
                </view>
                <view class="bottom_box">
                    <view>
                        <view class="dianhua_box" style="margin-bottom: 8rpx;">
                            联系电话：{{ item.phone }}
                        </view>
                        <view class="dianhua_box" style="margin-bottom: 20rpx;">
                            地址：{{ item.address }}
                        </view>
                    </view>
                    <view class="call_box">
                        <view class="dh_box"></view>
                        <view class="lx_box" @click="phone(item.phone)">联系</view>
                    </view>
                </view>

            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>
        <empoy v-else :imageUrl="'https://build.lwjcg.com/uploads/infomation.png'" :kongtext="'暂无信息'"></empoy>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            czBot: {
                id: 2
            },
            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            page: 1,   // 第一页
            flag: true,  // 防抖开关 防止用户不停的下拉
            infomList: []
        }
    },
    onLoad(options) {
        this.updateTabBarBadge()
    },
    onShow() {
        this.page = 1
        this.infomList = []
        this.init()
        this.updateTabBarBadge()
    },
    methods: {
        updateTabBarBadge() {
            this.$Request.post(this.$api.user.infimationStatictisc).then(res => {
                if (res.code == 200) {
                    console.log("MAin.js")
                    if (res.data.count > 0) {
                        let count = JSON.stringify(res.data.count)
                        // setTimeout(() => {
                        uni.setTabBarBadge({ //显示数字  
                            index: 3, //tabbar下标
                            text: count, //数字
                        })
                        // }, 500)
                    } else {
                        uni.removeTabBarBadge({
                            index: 3
                        });
                    }
                }
            })
        },

        phone(phone) {
            console.log(phone)
            const res = uni.getSystemInfoSync(); //获取当前的手机机型
            if (res.platform == 'ios') {
                uni.makePhoneCall({
                    phoneNumber: phone
                })
            } else {
                uni.makePhoneCall({
                    phoneNumber: phone,
                })
            }
        },
        goDetail(item) {
            uni.navigateTo({
                url: '/userPage/information/informDetail?id=' + item.id
            })
        },
        lower() {
            if (this.flag) {
                this.init();
            } else {
                this.loadStatus = 'normal'
            }

        },
        init(flag) {
            this.loadStatus = 'loading'
            let data = {
                flag: flag,
                page: this.page
            }
            this.$Request.post(this.$api.user.infomationIndex, data).then(res => {
                if (res.code == 200) {

                    this.updateTabBarBadge()
                    this.loadStatus = 'down'
                    var infomList = res.data.infomations;
                    infomList.forEach((item, index) => {
                        console.log(item, index, "12312")
                        item.show = false
                        if (item.uid == JSON.parse(uni.getStorageSync('user')).id) {
                            item.isMae = true
                        }

                    });
                    this.page++;
                    this.infomList = this.infomList.concat(infomList);
                    if (infomList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(240, 240, 240, 1);

    .fabu_box {
        position: fixed;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 30rpx;
        width: 96rpx;
        height: 96rpx;
        opacity: 1;
        border-radius: 16rpx;
        background-image: url('https://rubbish.lwjcg.com/static/index/ffb.png');
        background-size: 100% 100%;

    }

    .message_box {
        margin-top: 20rpx;
        width: 100%;
        height: calc(100vh - 200rpx);

        .dade_box {
            border-radius: 20rpx;
            background: rgba(255, 255, 255, 1);

            width: 692rpx;
            margin: auto;
            margin-bottom: 20rpx;
            position: relative;
        }

        .dange_msg_box {
            box-sizing: border-box;
            padding: 24rpx 26rpx;
            width: 100%;
            border-radius: 20rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            display: flex;
            justify-content: space-between;
            // align-items: center;

            .left_msg_box_1 {
                width: 396rpx;

                .left_msg_top_box {
                    width: 396rpx;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgba(34, 34, 34, 0.9);
                    text-align: left;
                    margin-bottom: 20rpx;
                }

                .left_msg_bot_box {
                    width: 100%;
                    height: 60rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tx_box {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                        margin-right: 8rpx;

                        image {
                            width: 60rpx;
                            height: 60rpx;
                            border-radius: 50%;
                        }
                    }

                    .left_tx_rt_text_box {
                        height: 60rpx;
                        margin-right: 20rpx;

                        .nNmae_box {
                            height: 34rpx;
                            font-size: 24rpx;
                            font-weight: 500;
                            line-height: 34rpx;
                            color: rgba(56, 56, 56, 1);
                            text-align: left;

                        }

                        .nTime_box {
                            height: 38rpx;
                            font-size: 26rpx;
                            font-weight: 400;
                            line-height: 38rpx;
                            color: rgba(194, 194, 194, 1);
                            text-align: left;

                        }
                    }

                    .edit_box {
                        width: 38rpx;
                        height: 38rpx;
                        background-image: url('https://rubbish.lwjcg.com/static/index/bbj.png');
                        background-size: 100% 100%;

                    }
                }

            }

            .left_msg_box_2 {
                width: 100%;

                .left_msg_top_box {
                    width: 100%;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgba(34, 34, 34, 0.9);
                    text-align: left;
                    margin-bottom: 20rpx;
                }

                .left_msg_bot_box {
                    width: 100%;
                    height: 60rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tx_box {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                        margin-right: 8rpx;

                        image {
                            width: 60rpx;
                            height: 60rpx;
                            border-radius: 50%;
                        }
                    }

                    .left_tx_rt_text_box {
                        height: 60rpx;
                        margin-right: 20rpx;

                        .nNmae_box {
                            height: 34rpx;
                            font-size: 24rpx;
                            font-weight: 500;
                            line-height: 34rpx;
                            color: rgba(56, 56, 56, 1);
                            text-align: left;

                        }

                        .nTime_box {
                            height: 38rpx;
                            font-size: 26rpx;
                            font-weight: 400;
                            line-height: 38rpx;
                            color: rgba(194, 194, 194, 1);
                            text-align: left;

                        }
                    }

                    .edit_box {
                        width: 38rpx;
                        height: 38rpx;
                        background-image: url('https://rubbish.lwjcg.com/static/index/bbj.png');
                        background-size: 100% 100%;

                    }
                }

            }

            .right_msg_box {
                width: 194rpx;
                height: 166rpx;
                border-radius: 20rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 20rpx;
                }
            }
        }

        .bottom_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 26rpx;

            .dianhua_box {
                width: 438rpx;
                height: 38rpx;
                /** 文本1 */
                font-size: 26rpx;
                font-weight: 400;
                line-height: 38rpx;
                color: rgba(100, 100, 100, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
        }


        .call_box {
            width: 144rpx;
            height: 60rpx;
            border-radius: 12rpx;
            background: rgba(218, 245, 233, 1);
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20rpx;

            .dh_box {
                width: 34rpx;
                height: 32rpx;
                background-image: url('https://rubbish.lwjcg.com/static/index/lxicon.png');
                background-size: 100% 100%;

            }

            .lx_box {
                width: 56rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(26, 194, 121, 1);
                text-align: center;

            }

        }
    }
}
</style>